<template>
    <div>
        <video-play v-bind="options" ref="videoPlayer"/>
    </div>
</template>

<script lang="ts" setup name="videoDemo">
import {videoPlay} from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';
import {onMounted, reactive} from "vue";

const videoPlayer = ref();
//参数说明 https://codelife.cc/vue3-video-play/guide/install.html#props
const options = reactive({
    width: '100%', //播放器宽度
    height: '450px', //播放器高度
    color: '#409eff', //主题色
    title: '', //视频名称
    src: 'https://wshlslive.migucloud.com/live/9E3Z3P6R_C0_3/playlist.m3u8', //视频源
    type:'m3u3',//视频类型  video/mp4 直播时使用m3u3需要改为m3u3
    muted: false, //静音
    webFullScreen: false,
    speed:false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: ['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'], //显示所有按钮,
});

onMounted(()=>{
    //隐藏进度条
    videoPlayer.value.$el.getElementsByClassName('d-slider__runway')[0].style.display = 'none'
});
</script>

<style lang="less" scoped>

</style>